<template>
    <!-- 笔记 -->
    <div class="recommend">
        <header>
            <div class="list" :style="`left: ${move}px;`" @touchstart="startTouch" @touchmove="onTouchMove"
                @touchend="endTouch">
                <ul>
                    <li># 中小学生营养餐</li>
                    <li># 挪威青花鱼健康新食尚</li>
                    <li># 嗨fun暑假</li>
                    <li># 备考生营养餐</li>
                    <li># 中小学生营养餐</li>
                    <li># 夏日多巴胺饮品</li>
                    <li># 夏日多巴胺饮品</li>
                </ul>
                <ul>
                    <li># 零腹担吃夜宵</li>
                    <li># 夏日多巴胺饮品</li>
                    <li># 包个粽子过端午</li>
                    <li># 挪威青花鱼健康新食尚</li>
                    <li># 挪威青花鱼健康新食尚</li>
                    <li># 夏日多巴胺饮品</li>
                    <li @click="getMore"><a href="#">查看更多</a></li>
                </ul>
            </div>
        </header>

        <section>
            <div class="box">
                <div class="box-left">
                    <div class="left-content" v-for="(item, index) in arr" :key="item.id">
                        <div>
                            <img :src="item.note.image_u" :alt="item.note.image_u">
                        </div>
                        <p>{{ item.note.title }}</p>
                        <div class="user-fav">
                            <div class="user">
                                <img :src="item.note.author.p" alt="">
                                <span>{{ item.note.author.n }}</span>
                            </div>
                            <div class="fav">
                                <div @click="toggleLike(index)" :key="index">
                                    <van-icon v-if="!item.isLiked" size="15" name="like-o" />
                                    <van-icon v-else color="#f15023" size="15" name="like" />
                                </div>
                                <span>{{ item.note.like_count }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="box-right">
                    <div class="right-content" v-for="(item, index) in arr_r" :key="index">
                        <div>
                            <img :src="item.note.image_u" :alt="item.note.image_u">
                        </div>
                        <p>{{ item.note.title }}</p>
                        <div class="user-fav">
                            <div class="user">
                                <img :src="item.note.author.p" alt="">
                                <span>{{ item.note.author.n }}</span>
                            </div>
                            <div class="fav">
                                <!-- 喜欢图标 -->
                                <div @click="toggleLike(item)" :key="index">
                                    <van-icon v-if="!item.isLiked" size="15" name="like-o" />
                                    <van-icon v-else color="#f15023" size="15" name="like" />
                                </div>
                                <span>{{ item.note.like_count }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <div class="message">
            <p>等待请求数据......</p>
        </div>
    </div>
</template>

<script>
import { notes } from '@/api';
import { Toast } from 'vant';


export default {
    data() {
        return {
            move: 0,
            startX: 0,
            isMoving: false,
            minMove: 0, // 最小移动值
            maxMove: -560, // 最大移动值，根据内容长度设置
            arr: [
                {
                    "id": 0,
                    "note": {
                        "id": 0,
                        "image_u": "https://i1.douguo.com/upload/note/4/9/f/320_49ec40c53396625e5de5d52990bf66af.jpg",
                        "title": "中小学生营养餐",
                        "author": {
                            "n": "杭振刚巴音陶亥家常菜",
                            "p": "http://tx1.douguo.net/upload/photo/8/a/7/70_u79172813281956215647.jpg"
                        },
                        "like_count": 1386,
                    }
                },
                {
                    "id": 0,
                    "note": {
                        "id": 0,
                        "image_u": "https://i1.douguo.com/upload/note/4/0/0/320_4076f640f1f5c3821ebded2f5d064ae0.jpg",
                        "title": "中小学生营养餐",
                        "author": {
                            "n": "杭振刚巴音陶亥家常菜",
                            "p": "http://tx1.douguo.net/upload/photo/8/a/7/70_u79172813281956215647.jpg"
                        },
                        "like_count": 1386,
                    }
                },
                {
                    "id": 0,
                    "note": {
                        "id": 0,
                        "image_u": "https://i1.douguo.com/upload/note/9/a/9/320_1727352208150.jpg",
                        "title": "中小学生营养餐",
                        "author": {
                            "n": "杭振刚巴音陶亥家常菜",
                            "p": "http://tx1.douguo.net/upload/photo/8/a/7/70_u79172813281956215647.jpg"
                        },
                        "like_count": 1386,
                    }
                },
                {
                    "id": 0,
                    "note": {
                        "id": 0,
                        "image_u": "https://i1.douguo.com/upload/note/d/f/a/320_dfcffaf380106ea9ff0ca67df9c0ad4a.jpg",
                        "title": "中小学生营养餐",
                        "author": {
                            "n": "杭振刚巴音陶亥家常菜",
                            "p": "http://tx1.douguo.net/upload/photo/8/a/7/70_u79172813281956215647.jpg"
                        },
                        "like_count": 1386,
                    }
                },

            ],
            arr_r: [
                {
                    "id": 0,
                    "note": {
                        "id": 0,
                        "image_u": "https://i1.douguo.com/upload/note/d/6/b/320_1727316382500.jpg",
                        "title": "中小学生营养餐",
                        "author": {
                            "n": "杭振刚巴音陶亥家常菜",
                            "p": "http://tx1.douguo.net/upload/photo/2/d/1/70_u62453642328456181524.jpg"
                        },
                        "like_count": 1386,
                    }
                },
                {
                    "id": 0,
                    "note": {
                        "id": 0,
                        "image_u": "https://i1.douguo.com/upload/note/1/a/a/320_1727310242711.jpg",
                        "title": "中小学生营养餐",
                        "author": {
                            "n": "杭振刚巴音陶亥家常菜",
                            "p": "http://tx1.douguo.net/upload/photo/c/b/1/70_u89583503448217072302.jpg"
                        },
                        "like_count": 1386,
                    }
                },
                {
                    "id": 0,
                    "note": {
                        "id": 0,
                        "image_u": "https://i1.douguo.com/upload/note/5/2/9/320_528ee3671941154cab061fd42e0097e9.jpg",
                        "title": "中小学生营养餐",
                        "author": {
                            "n": "杭振刚巴音陶亥家常菜",
                            "p": "http://tx1.douguo.net/upload/photo/0/9/b/70_u096185914224141153.jpg"
                        },
                        "like_count": 1386,
                    }
                },
                {
                    "id": 0,
                    "note": {
                        "id": 0,
                        "image_u": "https://i1.douguo.com/upload/note/d/7/1/320_d702f1eb7eb3f806e4cb0afe47190431.jpeg",
                        "title": "中小学生营养餐",
                        "author": {
                            "n": "杭振刚巴音陶亥家常菜",
                            "p": "http://tx1.douguo.net/upload/photo/4/e/f/70_u31740810318981094437.jpeg"
                        },
                        "like_count": 1386,
                    }
                },

            ],
        }
    },
    methods: {
        // 触摸开始
        startTouch(event) {
            // 记录触摸开始时的 X 坐标
            this.startX = event.touches[0].clientX;
            // 开始移动
            this.isMoving = true;
        },
        // 触摸移动
        onTouchMove(event) {
            // 如果没有移动则返回
            if (!this.isMoving) return;
            // 当前触摸点的 X 坐标
            const currentX = event.touches[0].clientX;
            // 计算移动的距离
            const deltaX = currentX - this.startX;
            // 计算新的 move 值
            const newMove = this.move + deltaX;

            // 限制移动范围
            if (newMove > this.minMove) {
                // 设置为最小值
                this.move = this.minMove;
            } else if (newMove < this.maxMove) {
                // 设置为最大值
                this.move = this.maxMove;
            } else {
                // 更新 move 值
                this.move = newMove;
            }
            // 更新起始 X 坐标
            this.startX = currentX;
        },
        // 触摸结束
        endTouch() {
            // 停止移动
            this.isMoving = false;
        },

        // 查看更多
        getMore() {
            Toast('敬请期待！');
        },
        // 切换喜欢状态
        toggleLike(item) {
            // 如果有喜欢状态，也可以类似处理
            item.isLiked = !item.isLiked;
        },
        // 获取数据
        async getNotesData() {
            await notes()
                .then(
                    content => {
                        // console.log({ content });
                        let { state, result } = content;
                        if (state === "success") {
                            this.arr = result.map((item, index) => {
                                if (item.id != null) {
                                    item.id = index;
                                }
                                // 如果有喜欢状态，可以初始化
                                item.isLiked = false;
                                return item;
                            });
                            console.log("请求成功", this.arr);
                        }
                    }
                )
                .catch(
                    // 请求失败
                    err => {
                        console.log("请求失败,请刷新", err);
                    }
                )
        }
    },

    created() {
        // this.getNotesData();
    }
}
</script>

<style lang="less" scoped>
@import url(../../common/less/varible.less);

.recommend {
    margin: @mar;

    header {
        width: 100vw;
        height: 100px;
        position: relative;
        overflow: hidden;

        .list {
            font-size: 12px;
            height: 100px;
            position: absolute;
            top: 0;
            // 添加平滑的滑动动画
            // transition: left 0.3s; 

            ul {
                width: 1000%;
                display: flex;
                margin: 5px 0 10px 0;

                li {
                    background-color: rgba(254, 67, 13, .1);
                    padding: 5px 10px;
                    margin: 0 5px;
                    border-radius: 15px;
                    font-family: Arial, Helvetica, sans-serif;
                    color: @fontColor;

                    a {
                        color: @fontColor;
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    section {
        width: 100%;

        .box {
            width: 374px;
            display: flex;
            justify-content: space-between;

            .box-left,
            .box-right {
                width: 185px;

                .left-content,
                .right-content {
                    margin-bottom: 10px;
                }


                >div {
                    width: 100%;
                }

                img {
                    width: 100%;
                }

                p {
                    font-size: 11px;
                    padding: 8px 10px;
                    line-height: 1.1;
                    // 多行文本溢出变省略号
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }

                .user-fav {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: @pad;
                    margin-top: -5px;

                    .user {
                        img {
                            width: 14px;
                            height: 14px;
                            border-radius: 50%;
                            vertical-align: middle;
                            margin-right: 2px;
                        }

                        span {
                            display: inline-block;
                            font-size: 10px;
                            color: #b1afaf;
                            vertical-align: middle;
                            transform: translateY(-1px);
                        }
                    }

                    .fav {
                        display: flex;
                        align-items: center;

                        span {
                            font-size: 10px;
                            color: #b1afaf;
                            display: inline-block;
                            margin-left: 3px;
                            transform: translateY(1px);
                        }
                    }
                }
            }

        }

    }

    .message {
        width: 100%;
        height: 100px;
        margin: 15px 0 10px 0;

        p {
            padding: 5px;
            text-align: center;
            color: #ccc;
            font-size: 15px;
        }
    }
}
</style>
